<template>
  <el-card>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="角色" prop="roleid">
        <el-select v-model="ruleForm.roleid">
          <el-option label="请选择" value></el-option>
          <el-option
            :value="item.id"
            v-for="item in roleList"
            :key="item.id"
            :label="item.rolename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员名称" prop="username">
        <el-input v-model.number="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="管理员密码" prop="password">
        <el-input type="password" placeholder="如果不修改密码,置空即可" v-model="ruleForm.password" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      roleList: [], // 角色列表
      ruleForm: {
        uid:this.$route.params.id,
        roleid: "", // 角色id
        username: "", //账号
        password: "", // 登录密码
        status: 1
      },
      rules: {
        roleid: {
          required: true,
          message: "请选择角色",
          trigger: "blur"
        },
        username: {
          required: true,
          message: "请输入管理员账号",
          trigger: "blur"
        },
        status: {
          required: true,
          message: "请选择状态",
          trigger: "blur"
        }
        // age: [{ validator: checkAge, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 获取当前管理员的信息
    async getAdminInfo(){
      const res=await this.$http.get('/api/userinfo',{params:{uid:this.ruleForm.uid}});
      if(res.code==200){
        this.ruleForm=res.list;
        this.ruleForm.password='';
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //   提交数据
          const res = await this.$http.post("/api/useredit", this.ruleForm);
          if (res.code == 200) {
            this.$success("修改成功");
          } else {
            this.$error("修改失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取角色列表
    async getRoleList() {
      const res = await this.$http.get("/api/rolelist");
      if (res.code == 200) {
        this.roleList = res.list;
      }
    }
  },
  created() {
    // 获取角色列表
    this.getRoleList();
    // 当前管理员的信息
    this.getAdminInfo();
  }
};
</script>

<style>
</style>